<template>
	<view class="register">
		<!--顶部返回按钮-->
		<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">REGISTER</view>
			<view class="welcome">
				完善信息！
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">登录账号</text>
					<input type="text" v-model="registerParams.beforeUserName" placeholder="请输入账号" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="password" v-model="registerParams.beforePassword" placeholder="请输入密码" maxlength="18" />
				</view>
				<view class="input-item">
					<text class="tit">确认密码</text>
					<input type="password" v-model="password_repetition" placeholder="请输入确认密码" maxlength="18" />
				</view>
				<view class="input-item">
					<text class="tit">昵称</text>
					<input type="text" v-model="registerParams.beforeUserNickName" placeholder="请输入您的昵称"
						maxlength="12" />
				</view>
				<view class="input-item">
					<text class="tit">邮箱</text>
					<input type="text" v-model="registerParams.beforeUserEmail" placeholder="请输入您的邮箱" />
				</view>
		
			</view>
			<button class="confirm-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading" :loading="btnLoading"
				@tap="toRegister">
				提交
			</button>
		</view>

		<!-- 底部协议 -->
		<view class="footer-protocol">
			<text @tap="isAppAgreementDefaultSelect" class="cuIcon"
				:class="appAgreementDefaultSelect ? `text-${themeColor.name} cuIcon-radiobox` : 'cuIcon-round'"></text>
			<text class="content">同意</text>
			<!-- 协议地址 -->
			<navigator :class="'text-' + themeColor.name"
				url="/pages/set/about/detail?field=protocol_register&title=注册协议" open-type="navigate">《用户协议》</navigator>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		registerByPass,
		smsCode
	} from '@/api/login';
	import moment from '@/common/moment';
	import avatar from '@/components/rf-avatar/rf-avatar';
	import request from '../../utils/request.js'
	export default {
		components: { avatar },
		data() {
			return {
				action: "http://localhost:9090/detail/bgs/picture/handelPic",
				appAgreementDefaultSelect: this.$mSettingConfig.appAgreementDefaultSelect, // 是否允许点击登录按钮
				closeRegisterPromoCode: this.$mSettingConfig.closeRegisterPromoCode, // 是否允许点击登录按钮
				registerParams: {
					beforeUserName: '',
					beforePassword: '',
					beforeUserNickName: '',
					beforeUserImg: '',
					beforeUserEmail: "",
					beforeUserLeavel: 1,
					beforeUserDelete: 1,
				},
				password_repetition: '',
				btnLoading: false,
				reqBody: {},
				smsCodeBtnDisabled: true
			};
		},
		created() {
			this.addEmail()
		},
		methods: {
			// // 上传头像
			// uploadImage() {
			// 	// 从相册选择图片
			// 	const _this = this;
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album'],
			// 		success: function(res) {
			// 			_this.handleUploadFile(res.tempFilePaths);
			// 		}
			// 	});
			// },
			// // 上传头像
			// handleUploadFile(data) {
			// 	request({
			// 		url:"/detail/bgs/picture/handelPic",
			// 		methods:"post"
			// 	})
			// },
			toRegister() {
				if (this.registerParams.beforeUserName.length == 0) {
					//ti shi xin xi
					uni.showToast({
						icon: 'none',
						title: '登录用户名不能为空',
					});
					return;
				}
				//验证密码不能为空
				if (this.registerParams.beforePassword.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空',
					});
					return;
				}
				//验证密码长度
				if (this.registerParams.beforePassword.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码长度不能小于6',
					});
					return;
				}
				if (this.registerParams.beforePassword != this.password_repetition) {
					uni.showToast({
						icon: 'none',
						title: '两次密码不一致',
					});
					return;
				}
				request({
					url: '/before/bgs/before-user/ThreeAddUser',
					data: this.registerParams,
					method: 'POST',
					success: (res) => {
						uni.setStorage({
							key: "beforeUser",
							data: res.data.data.data[0],
							success() {
								console.log("存储注册用户信息成功")
							}
						})
						uni.reLaunch({
							url: "../profile/profile"
						})
					}
				})
			},
			addEmail() {
				uni.getStorage({
					key: 'beforeUser',
					success: (res) => {
						console.log(res.data.data.data)
						this.registerParams.beforeUserEmail = res.data.data.data

					}
				})
			},
			upload(res) {
				this.registerParams.beforeUserImg = res;
				console.log(this.registerParams.beforeUserImg)
			},
		}
	};
</script>
<style lang="scss">
	.register {
		padding-top: 60px;
		position: relative;
		width: 100vw;
		overflow: hidden;
		background: #fff;

		.wrapper {
			position: relative;
			width: 100vw;
			z-index: 90;
			background: #fff;
			padding-bottom: 40upx;

			.welcome {
				position: relative;
				left: 50upx;
				top: -90upx;
				font-size: 46upx;
				color: #555;
				text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
			}

			.input-content {
				padding: 0 60upx;
			}

			.input-item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				padding: 0 30upx;
				background: $page-color-light;
				height: 120upx;
				border-radius: 4px;
				margin-bottom: 50upx;

				&:last-child {
					margin-bottom: 0;
				}

				.tit {
					height: 50upx;
					line-height: 56upx;
					font-size: $font-sm + 2upx;
					color: $font-color-base;
				}

				input {
					width: calc(100% - 100upx);
					height: 60upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					width: 100%;
				}
			}

			.input-item-sms-code {
				position: relative;
				width: 100%;

				.sms-code-btn {
					position: absolute;
					color: #111;
					right: 20upx;
					bottom: 20upx;
					font-size: 28upx;
				}

				.sms-code-resend {
					color: #999;
				}

				.sms-code-btn:after {
					border: none;
					background-color: transparent;
				}
			}

			.forget-section {
				font-size: $font-sm + 2upx;
				color: $font-color-spec;
				text-align: center;
				margin-top: 40upx;
			}
		}

		.portrait-box {
			clear: both;
			z-index: 2;
		}

		.back-btn {
			position: absolute;
			left: 40upx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 40upx;
			color: $font-color-dark;
		}

		.left-top-sign {
			font-size: 120upx;
			color: $page-color-base;
			position: relative;
			left: -16upx;
		}

		.right-top-sign {
			position: absolute;
			top: 80upx;
			right: -30upx;
			z-index: 95;

			&:before,
			&:after {
				display: block;
				content: '';
				width: 400upx;
				height: 80upx;
				background: #b4f3e2;
			}

			&:before {
				transform: rotate(50deg);
				border-radius: 0 50px 0 0;
			}

			&:after {
				position: absolute;
				right: -198upx;
				top: 0;
				transform: rotate(-50deg);
				border-radius: 50px 0 0 0;
				/* background: pink; */
			}
		}

		.register-section {
			margin: 30upx 0 50upx;
			width: 100%;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
			text-align: center;

			text {
				color: $font-color-spec;
				margin-left: 10upx;
			}
		}

	}
</style>
